<template>
  <div class="flex flex-between pagination">
    <div class="no-wrap">
      <span class="mr-10">总条数: {{ total }}</span>
      <el-select
        v-model="pageSize"
        class="m-2"
        size="mini"
        placeholder="Select"
      >
        <el-option
          v-for="item in pageSizes"
          :key="item"
          :label="item"
          :value="item"
          @click="handleSizeChange"
        >
        </el-option>
      </el-select>
    </div>

    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
interface Pagination {
  total: number;
  pageSize?: number;
  pageSizes?: Array<number>;
}
const currentPage = ref(1);
const props = withDefaults(defineProps<Pagination>(), {
  pageSize: 10,
  pageSizes: () => [10, 50, 100],
});

const emits = defineEmits<{
  (e: "current-change", page: number): void;
  (e: "size-change", size: number): void;
}>();

const handleSizeChange = () => {
  emits("size-change", props.pageSize);
};
const handleCurrentChange = (page: number) => {
  emits("current-change", page);
};
</script>

<style lang="scss" scoped>
.pagination {
  font-size: 13px;
  padding: 5px 0px 5px 10px;
}
:deep(.el-select .el-input) {
  width: 70px;
}
</style>
